<template>
  <div id="app" :style="style">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      scaleX: 1,
      scaleY: 1
    }
  },
  computed: {
    style() {
      return {transform: `scaleX(${this.scaleX}) scaleY(${this.scaleY})`}
    }
  },
  created() {
    window.onresize = _ => {//console.log(window.innerHeight)
      this.$$_windowResize();
    }
  },
  mounted() {
    this.$$_windowResize();
  },
  methods: {
    $$_windowResize() {
      const [w, h, width, height] = [window.innerWidth, window.innerHeight, 1920, 1080];
      this.scaleX = w / width;
      this.scaleY = h / height;
    }
  }
}
</script>

<style>
*, html, body {
  margin: 0;
  padding: 0;
}
html, body {
  overflow: hidden;
}
#app {
  width: 1920px;
  height: 1080px;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform-origin: left top;
}
</style>
